<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div节点信息</title>
		<style>
			#pic{
				border: 4px groove gold;
				border-radius: 20px;
			}
			#pic img{
				height: 200px;
				width: 160px;
			}
		</style>
		<script>
			function getDiv(){
				let d1=document.getElementById("d1");
				//d1=d1.nextSibling;
				alert(d1.nodeName);
				alert(d1.nodeValue);
				alert(d1.nodeType);
			}
			var ar=["../image/banner.png","../image/book-01.jpg","../image/jixue.jpg","../image/kongzi.jpg","../image/lovk.jpg","../image/suanming.jpg"];
			var index=0;
			function addPic(){
				let ig=document.createElement("img");
				ig.setAttribute("src",ar[index]); 
				index++;
				index=index%ar.length;
				
				document.getElementById("pic").appendChild(ig);
				//document.body.appendChild(ig);
			}
			function addPic2(){
				let ig=document.createElement("img");
				ig.setAttribute("src",ar[index]); 
				index++;
				index=index%ar.length;
				
				let d=document.getElementById("pic");
				d.insertBefore(ig,d.firstElementChild);
			}
			function dokelong(){
				let d=document.getElementById("pic");
				let d2=d.cloneNode(true);
				document.body.appendChild(d2);
			}
			function delDiv(){
				let d=document.getElementById("pic");
				d.removeChild(d.lastElementChild);
			}
		</script>
	</head>
	<body>
		<div id="d1">
			教育改变生活
		</div>
		<button type="button" onclick="getDiv()">div信息</button>
		<button type="button" onclick="addPic()">添加一张图片</button>
		<button type="button" onclick="addPic2()">添加一张图片到Div的前面</button>
		<button type="button" onclick="dokelong()">克隆</button>
		<button type="button" onclick="delDiv()">删除最后一张图片</button>
		<div id="pic"></div>
	</body>
</html>